import React, {Component} from 'react';
import {getArticleDetail} from "../../api/article";
import ReactMarkdown from 'react-markdown'
class MainDetail extends Component {
  state = {
    title: '',
    summary: '',
    content: '',
    type: '',
    username: '',
    avatar: '',
    uid: '',
    createDate: '',
    articleId: ''
  };

  render() {
    let {
      title,
      summary,
      content,
      type,
      username,
      avatar,
      createDate
    } = this.state;
    return (
      <div>
        <h1>{title}</h1>
        <h4>{type}</h4>
        <h3>{username}</h3>
        <img src={avatar} alt=""/>
        <p>{createDate}</p>
        <p>{summary}</p>
        <ReactMarkdown
          source={content}
          escapeHtml={false}
        />
      </div>
    );
  }

  componentDidMount() {
    console.log(this.props.match.params.id);
    getArticleDetail({id: this.props.match.params.id}).then(({data}) => {
      let {title,
        summary,
        content,
        type,
        username,
        avatar,
        uid,
        createDate,
        articleId} = data;
      this.setState({
        title,
        summary,
        content,
        type,
        username,
        avatar,
        uid,
        createDate,
        articleId
      })
    });

  }
}

export default MainDetail;
